<template>
<div>

  <my-header>{{title}}</my-header>
    <div class="login-body">
      <n-card calss='test'>
        <n-grid x-gap="12" :cols="1">
          <n-space justify="center">
            <n-form :label-width="90" :model="formValue">
              <n-form-item label="账号：" path="user.username">
                <n-input placeholder="请输入账号" v-model:value="formValue.user.mobile" />
              </n-form-item>
              <n-form-item label="密码：" path="user.password">
                <n-input placeholder="请输入密码" v-model:value="formValue.user.password" />
              </n-form-item>
            </n-form>
          </n-space>
        </n-grid>
        <n-space justify="center">

          <n-button type="primary" @click="login">登录</n-button>

          <router-link to="/register">
          <n-button type="info" >去注册</n-button>
          </router-link>
        </n-space>
      </n-card>
    </div>
</div>
</template>

<script>
import {useMessage,NMessageProvider,NButton, NCard, NGrid, NGi, NSpace, NForm, NFormItem, NInput} from 'naive-ui'
import {reactive, ref, computed} from 'vue'
import {getCurrentInstance} from 'vue'
import MyHeader from '../components/Header'
import {useRouter} from 'vue-router'
import { useWebsocket } from '../hooks/index'
import {WS_ADDRESS} from '../configs'
import {useStore} from 'vuex'
export default {
  components:{
    NButton,NCard,NGrid,NGi,NSpace,NForm,NFormItem,NInput,NMessageProvider,
    MyHeader
  },
  setup(){
    const store = useStore()
    let ws = {}
    let wsInfo = reactive({})
    const router = useRouter()
    let title = '登录'
    const {proxy} = getCurrentInstance()
    let formValue = ref({
      user:{
        mobile:'gcc',
        password:'123456'
      }
    })
   
    // 这块不管是注册还是登录，都会跳转到自己的聊天界面。
    const login = ()=>{
        // console.log(formValue.value.user)
        // console.log(formValue.value.user.username)
        proxy.$axios.post('/v1/login',{
        mobile:formValue.value.user.mobile,
        password:formValue.value.user.password
      }).then(response=>{
        let {data} = response
        // console.log({...data.user})
        console.log(data)
        if (data.code == '200') {
          
          localStorage.setItem('userinfo', JSON.stringify(data.user))
          router.push({name:'Chat',params:{...data.user}})
          // router.push({name:'MainScreen', params:{
          //   ...data.user
          // }})
          
          // console.log(url)
          const {id, token} = JSON.parse(localStorage.getItem('userinfo'))
          const url = `${WS_ADDRESS}?id=${id}&token=${token}`
          ws = useWebsocket(url, handleMessage)
          // console.log(typeof sws)
          
        }
      }
      ).catch(error =>{
        console.log(error)
      })
    }
    
    function handleMessage(e){
        if (e.data.indexOf("}")> -1) {
          //  信息应该是数组，里面是一个个对象
          let info = JSON.parse(e.data)
          // 通过store检查存储所有的回话信息，供给所有组件使用
          store.commit('initChatInformation', info)
        }
    }

    const register = ()=>{
      proxy.$axios.post('/v1/register', {
        mobile:formValue.value.user.mobile,
        password:formValue.value.user.password
      }).then(response=>{
        console.log(response)

      }).catch(error => {
        console.log(error)
      })
    }
    return{
      login,
      register,
      formValue,
      title
    }
  },
}
</script>

<style>
.test{
  background-color:aquamarine;
}
.light-green {
  height: 108px;
  background-color: rgba(0, 128, 0, 0.12);
}
.green {
  height: 108px;
  background-color: rgba(0, 128, 0, 0.24);
}
.n-card{
  width: 400px;
}
.login-body{
  display: flex;
  justify-content: center;
  height: 100vh;
  /* align-items: center; */
}
</style>
